// $(function(){
//     var imgIndex=0;
//     function autoPlay(){
//         imgIndex++;
//         if(imgIndex>5){
//             imgIndex=0;
//         }
//         $("#banner ul li").
//     }
// })


// 鼠标移入移出
var oBox = document.getElementById("box");
// 上面大图片的盒子
var oUl = document.getElementById("oul");
// 下面小图片的盒子
var oOl = document.getElementById("ool");
// 自定义大图片下标
var imgIndex = 0;
var dianIndex = 0;
// 定时器
var myTime;

// 自动播放
function autoPlay() {
    imgIndex++;
    // 当大图片下标大于5的时候，变成下标为0的
    if (imgIndex > 5) {
        imgIndex = 0;
    }
    // 将所有大图片的透明度设为0
    Array.from(oUl.children).forEach(function (el, index) {
        animate(el, { opacity: 0 })
    })
    // 将当前大图片的透明度设为1
    animate(oUl.children[imgIndex], { opacity: 1 });
    // console.log(oOl.children)
    dianIndex++
    if(dianIndex>5){
        dianIndex =0;
    }
    for(var i=0; i<oOl.children.length;i++){
        // oOl.children[i].tempIndex = i;
        oOl.children[i].style.backgroundColor = "#000";
    }
    oOl.children[dianIndex].style.backgroundColor = "#FF0000";
}


function goImg() {
    myTime = setInterval(autoPlay, 2000)
}

window.onload = function () {
    goImg();
}
// 鼠标移入停止播放
oBox.addEventListener('mouseenter', function () {
    clearInterval(myTime);
})
// 鼠标移出继续播放
oBox.addEventListener('mouseleave', function () {
    goImg();
})

for(var i=0; i<oOl.children.length;i++){
    oOl.children[i].tempIndex = i;
    oOl.children[i].onclick=function(){
        imgIndex = dianIndex = this.tempIndex-1
        autoPlay();
    }
}